<template>
  <KView class="goods-model-dialog">
    <KView class="goods-model-dialog-close" @click="closeDialog">
      <img class="sys-img" :src="closeImg" mode="aspectFit">
    </KView>

    <template v-if="goodsModelData!==null">
      <KView class="goods-model-dialog-content">
        <KView class="goods-info">
          <KView class="goods-info-avatar">
            <sys-image :src="goodsModelData.pic" mode="auto" :radius="8"></sys-image>
          </KView>
          <KView v-if="curModel!==null" class="goods-info-data">
            <KView class="goods-info-price">
              <span class="price-unit">¥</span>
              <span class="price-num">{{curModel.price}}</span>
            </KView>
            <KView class="goods-info-count">
              <span>库存：{{curModel.count}}件</span>
              <span>已售：{{curModel.salesCount}}件</span>
            </KView>
            <KView>已选：{{curModel.name}}</KView>
          </KView>
        </KView>

        <KView class="goods-model-line"></KView>
        <KView class="goods-model-classify">
          <KView>分类</KView>
          <KView class="goos-model-select">
            <KView v-for="(models,rowIndex) in goodsModelList" :key="`row_${rowIndex}`">
              <template v-for="(model,index) in models">
                <KView :key="`model_${index}`" v-if="model!==null" class="ellipsis" :class="{'select':model===curModel,'disabled':model.count===0}"
                  @click="modelClick(model)">{{model.name}}</KView>
              </template>
            </KView>
          </KView>
        </KView>

        <KView class="goods-model-line"></KView>
        <KView class="goods-model-buy clearfix">
          <KView style="float:left" class="goods-model-buy-label">购买数量</KView>
          <KView style="float:right" class="goods-model-buy-input">
            <sys-input-number v-model="goodsModelData.buyCount" :min="type==='preBuy'?0:1" :max="buyCountMax" :precision="0">
            </sys-input-number>
          </KView>
        </KView>

        <KView class="goods-model-line"></KView>
        <KView class="goods-model-money clearfix">
          <KView style="float:left" class="goods-model-money-label">合计</KView>
          <KView style="float:right" class="goods-model-money-price">
            <span class="price-unit">¥</span>
            <span class="price-num">{{totalMoney}}</span>
          </KView>
        </KView>
      </KView>
      <KView class="goods-model-dialog-footer">
        <KView class="goods-model-btn" @click="ensure">确定</KView>
      </KView>
    </template>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';
  import SystemUtil from 'utils/systemUtil';

  import GoodsApi from 'services/goodsApi';

  import SysImage from 'common/sysImage';
  import SysInputNumber from 'common/sysInputNumber';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      },
      type: {
        type: String,
        default: 'shopCar'
      },
      buyRecord: Object
    },

    computed: {
      curModel: {
        get() {
          let goodsModelData = this.goodsModelData;
          if (goodsModelData === null) {
            return null;
          }
          return goodsModelData.curModel;
        },
        set(obj) {
          let goodsModelData = this.goodsModelData;
          if (goodsModelData === null) {
            return;
          }
          goodsModelData.curModel = obj;
        }
      },
      goodsModelList() {
        let goodsModelData = this.goodsModelData;
        if (goodsModelData === null) {
          return [];
        }
        return goodsModelData.modelArr;
      },
      buyCountMax() {
        let curModel = this.curModel;
        if (curModel === null) {
          return 1;
        }
        let count = curModel.count;
        return count > 999 ? 999 : count;
      },
      totalMoney() {
        let curModel = this.curModel;
        if (curModel === null) {
          return undefined;
        }

        let price = curModel.price;
        let buyCount = this.goodsModelData.buyCount;
        let money = price * buyCount;
        money = SystemUtil.roundValue(money, 2);
        return money;
      }
    },

    data() {
      return {
        closeImg: GlobalData.images.iconClose,
        goodsModelData: null
      };
    },

    created() {
      SystemUtil.showLoading();
      this.setGoodsModelData().then(() => {
        SystemUtil.hideLoading();
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setGoodsModelData() {
        return GoodsApi.getGoodsModelData(this.goods.defId, this.buyRecord).then(goodsModelData => {
          this.goodsModelData = goodsModelData;
          return goodsModelData;
        });
      },

      modelClick(model) {
        if (model.count === 0) {
          return;
        }

        let curModel = this.curModel;
        if (curModel === model) {
          return;
        }
        this.curModel = model;

        if (this.type === 'preBuy') {
          this.goodsModelData.resetBuyCount(this.buyRecord);
        }
      },

      ensure() {
        let goodsModelData = this.goodsModelData;
        let code = goodsModelData.checkValid();
        if (code !== '') {
          let msg = this.i18n.getMsg(`shopGoods.error.${code}`);
          SystemUtil.alert(msg, '提示');
          return;
        }
        this.$emit('ensure', goodsModelData);
      },

      closeDialog() {
        this.$emit('close-dialog');
      }
    },

    components: {
      SysImage,
      SysInputNumber
    }
  };

</script>

<style lang="scss">
  @import '~style/chooseGoodsModel';

</style>
